<template>
  <el-dialog
    :title="$t('formgen.funcalc.title')"
    v-model="dialogVisible"
    v-if="dialogVisible"
    width="70%"
  >
    <formula-content
      ref="formulaContentRef"
      :cm-value="cmValue"
      :fields="fields"
      :mode="mode"
    >
      <template #tips>
        <slot name="tips"></slot>
      </template>
    </formula-content>
    <template #footer>
      <el-button
        size="default"
        @click="dialogVisible = false"
      >
        {{ $t("formI18n.all.cancel") }}
      </el-button>
      <el-button
        size="default"
        type="primary"
        @click="handleSaveFormula"
      >
        {{ $t("formI18n.all.confirm") }}
      </el-button>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import FormulaContent from "./FormulaContent.vue";
import { i18n } from "@/i18n";

interface Props {
  cmValue?: string;
  fields?: any[];
  mode?: string;
  title?: string;
}

const props = withDefaults(defineProps<Props>(), {
  cmValue: "",
  fields: () => [],
  mode: "text/x-formula",
  title: i18n.global.t("formgen.funcalc.title")
});

const emit = defineEmits<{
  (e: "save", value: string): void;
}>();

const dialogVisible = ref(false);
const formulaContentRef = ref<InstanceType<typeof FormulaContent> | null>(null);

const open = () => {
  dialogVisible.value = true;
};

const handleSaveFormula = () => {
  emit("save", formulaContentRef.value?.getValue() || "");
  dialogVisible.value = false;
};

defineExpose({
  open
});
</script>

<style lang="scss" scoped>
.box-card {
  .body {
    border: 1px solid #dfe4ed;
    border-top: none;
    height: 280px;
  }
}

.scrollbar-box {
  height: 100% !important;
  padding-bottom: 0px !important;
}

.intro-box {
  height: 100%;
  border: 1px solid #dfe4ed;
  padding: 10px;
}

.field-list {
  display: block;

  .field {
    list-style-type: none;
    line-height: 30px;
    padding-left: 10px;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
  }

  .field:hover {
    background: #f6f8f9;
    color: rgba(0, 0, 0, 0.75);
    cursor: pointer;
  }

  .opertion-btns {
    height: 28px;
    line-height: 25px;
    position: absolute;
    right: 5px;
    display: inline-flex;
    align-items: center;
    font-size: 18px;
    color: var(--el-text-color-primary);
    justify-content: flex-end;
    gap: 3px;
  }
}
</style>
